<template>
	<view class="choose-address">
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="flex align-center">
				<view
					class="cu-item"
					:class="index == TabCur ? 'text-black text-bold cur' : 'text-dark'"
					v-for="(item, index) in tabs"
					:key="index"
					@tap="tabSelect"
					:data-id="index"
				>
					{{ item }}
				</view>
			</view>
		</scroll-view>

		<scroll-view scroll-y :style="{ height: height }">
			<!-- 省 -->
			<view class="animation-slide-left" v-for="(item, index) in provinceData" :key="item.id">
				<view
					class="padding-lr padding-bottom-lg"
					:class="item.choose == 1 ? 'text-black text-bold' : 'text-dark'"
					v-if="TabCur == 0"
					:data-id="item.id"
					:data-index="index"
					:data-name="item.name"
					@tap="chooseProvinceFn"
				>
					{{ item.name }}
					<text class="cuIcon-check fr" v-if="item.choose == 1"></text>
				</view>
			</view>
			<!-- 市 -->
			<view class="animation-slide-left" v-for="(item, index) in cityData" :key="item.id">
				<view
					class="padding-lr padding-bottom-lg"
					:class="item.choose == 1 ? 'text-black text-bold' : 'text-dark'"
					v-if="TabCur == 1"
					:data-id="item.id"
					:data-index="index"
					:data-name="item.name"
					@tap="chooseCityFn"
				>
					{{ item.name }}
					<text class="cuIcon-check fr" v-if="item.choose == 1"></text>
				</view>
			</view>
			<!-- 区镇 -->
			<view class="animation-slide-left" v-for="(item, index) in areaData" :key="item.id">
				<view
					class="padding-lr padding-bottom-lg"
					:class="item.choose == 1 ? 'text-black text-bold' : 'text-dark'"
					v-if="TabCur == 2"
					:data-id="item.id"
					:data-index="index"
					:data-name="item.name"
					@tap="chooseAreaFn"
				>
					{{ item.name }}
					<text class="cuIcon-check fr" v-if="item.choose == 1"></text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import * as $apis from '@/api/'
import $mUtils from '@/common/utils'

export default {
	name: 'choose-address',
	props: {
		// 组件高度
		height: {
			type: String,
			default: '500px'
		}
	},
	data() {
		return {
			TabCur: 0,
			scrollLeft: 0,
			provinceData: [],
			cityData: [],
			areaData: [],
			addressId: [],
			tabs: ['请选择', '', '']
		}
	},
	mounted() {
		this.getProvince()
	},
	methods: {
		// Tabs切换
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
		},
		// 点击省，获取市
		async chooseProvinceFn(e) {
			const { id, name, index } = e.currentTarget.dataset
			this.provinceData = this.provinceData.map((item, i) => {
				return {
					...item,
					choose: index == i ? 1 : 0
				}
			})
			this.TabCur = 1
			this.cityData = []
			this.addressId[0] = id
			this.tabs = [name, '请选择', '']
			await this.getCity({ parent_id: id })
		},
		// 点击市，获取区
		async chooseCityFn(e) {
			const { id, name, index } = e.currentTarget.dataset
			this.cityData = this.cityData.map((item, i) => {
				return {
					...item,
					choose: index == i ? 1 : 0
				}
			})
			this.TabCur = 2
			this.areaData = []
			this.tabs[1] = name
			this.tabs[2] = '请选择'
			this.addressId[1] = id
			await this.getArea({ parent_id: id })
		},
		// 点击区
		chooseAreaFn(e) {
			const { id, name, index } = e.currentTarget.dataset
			this.areaData = this.areaData.map((item, i) => {
				return {
					...item,
					choose: index == i ? 1 : 0
				}
			})
			this.tabs[2] = name
			this.addressId[2] = id

			if (this.addressId.length == 3) {
				this.$emit('getAddress', {
					id: this.addressId,
					name: this.tabs.join('-')
				})
			} else {
				$mUtils.tip('请选择省市区~')
			}
		},
		// 获取省
		async getProvince() {
			const { code, data } = await $apis.getRegion({ parent_id: 0 })
			if (code == 0) {
				this.provinceData = data.map(item => {
					return {
						...item,
						choose: 0
					}
				})
			}
		},
		// 获取城市
		async getCity(params) {
			const { code, data } = await $apis.getRegion(params)
			if (code == 0) {
				this.cityData = data.map(item => {
					return {
						...item,
						choose: 0
					}
				})
			}
		},
		// 获取县区
		async getArea(params) {
			const { code, data } = await $apis.getRegion(params)
			if (code == 0) {
				this.areaData = data.map(item => {
					return {
						...item,
						choose: 0
					}
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.choose-address {
	background-color: #fff;
	.nav {
		width: 100%;
		height: 94rpx;
		margin: 0 0 24rpx;
	}
}
</style>
